<html>
    <head>
        <title>能耗分析</title>
        <link rel="stylesheet" href="../../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../../style.css">


        <style>
            .dateSign .el-radio{
                margin-right: -8px;
            }

            .page-head{
                border: solid 1px transparent;
            }

        </style>

    </head>
    <body>
        <div class="page" id="page-vue">

            <div class="page-title">能耗排名</div>

            <div class="page-main">
                <el-row>
                    <el-col :span="4">
                        <dev-tree v-on:click-node="onClickNode" :tabsign="'z'" :energy="energyType" ></dev-tree>
                    </el-col>
                    <el-col :span="20">
                            <div class="page-head">
                                    <el-form :inline="true" size="small">
                                            <el-form-item label="">
                                                <el-date-picker type="date" v-model="beginTime" placeholder="日期" style="width: 150px;" value-format="yyyy-MM-dd"></el-date-picker>
                                            </el-form-item>

                                            <el-form-item label="周期">
                                                    <el-radio-group v-model="cycle" @change="onChangeCycle">
                                                            <el-radio-button label="日"></el-radio-button>
                                                            <el-radio-button label="月"></el-radio-button>
                                                            <el-radio-button label="年"></el-radio-button>
                                                          </el-radio-group>
                                                  </el-date-picker>
                                            </el-form-item>

                                            <el-form-item>
                                                <el-tooltip effect="dark" content="请点击左边树中区域" v-model="tooltip" placement="right">
                                                <el-button type="primary" @click="search">查询</el-button>
                                                </el-tooltip>
                                            </el-form-item>
                                        </el-form>
                            </div>
                            <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick" style="margin-top:0px;">
                                    <el-tab-pane label="总用量" name="tabCount">
                                    </el-tab-pane>
                                    <el-tab-pane label="定额超限比" name="tabDine">
                                    </el-tab-pane>
                                    <el-tab-pane label="转换比" name="tabZuanh">
                                    </el-tab-pane>
                            </el-tabs>
                            <div class="chart-outer">
                                <chart-elex v-bind:option="chartOption"></chart-elex>
                            </div>

                    </el-col>
                </el-row>

            </div>


        </div>


        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

        <script>

                var vuePage=new Vue({
                    el:'#page-vue',
                    data:{
                        tabName:'tabCount',
                        beginTime:'',
                        dateType:'day',
                        cycle:'日',
                        tags:[],
                        currNodedata:null,
                        topDatas:[],
                        chartOption:{},
                        energyType:'',
                        tooltip:false,

                    },
                    methods:{
                        search:function(){
                            this.loadEnergyTop10();
                        },

                        onChangeCycle:function(){
                            switch(this.cycle){
                                case "日":
                                    this.dateType='day';
                                break;
                                case "月":
                                    this.dateType='month';
                                break;
                                case "年":
                                    this.dateType='year';
                                break;
                            }
                            this.loadEnergyTop10();
                        },

                        onClickNode(node){
                            if(node.id.substr(0,1)!="Z"){ //必须点击区域
                                return;
                            }
                            this.currNodedata = node;
                            this.loadEnergyTop10();
                        },


                        onTabClick(tab,event){
                            this.refreshChart();
                        },
                        onTagClose(tag){
                            this.tags.splice(this.tags.indexOf(tag), 1);
                        },

                        loadEnergyTop10(){
                            if(!this.currNodedata) return;
                            let datetime;
                            let sortType=0;
                            let _self = this;
                            switch(this.cycle){
                                case "日":
                                    datetime = this.beginTime;
                                break;
                                case "月":
                                    this.dateType='month';
                                    datetime = this.beginTime.substr(0,7);
                                break;
                                case "年":
                                    this.dateType='year';
                                    datetime = this.beginTime.substr(0,4);
                                break;
                            }
                            //能耗排名，只能按区域统计
                            var dArr = datetime.split('-');
                            var param={
                                zoneIds:[this.currNodedata.dataId].join(','),
                                zoneType:0,
                                energyType:this.energyType,
                                year:dArr[0]||0,
                                month:dArr[1]||0,
                                day:dArr[2]||0,
                                sortType:sortType,
                                UserId:SiteConfig.account.id
                            };
                            HttpUtil.get('Analysis/getEnergyTop10',param)
                            .success(function(data){
                                console.log('getEnergyTop10',data);
                                _self.topDatas = data.data;
                                _self.refreshChart();
                            });
                        },

                        refreshChart(){

                            let ylabels=[],xvalues=[],unit='';

                            if(this.topDatas.length>0){
                                let field;
                                switch(this.tabName){
                                    case 'tabCount':
                                        field='field04';
                                        unit='kWh';
                                    break;
                                    case 'tabDine':
                                        field='field08';
                                        unit='%';
                                    break;
                                    case 'tabZuanh':
                                        field='field09';
                                        unit='%';
                                    break;
                                }

                                this.topDatas.forEach(item => {
                                    //let value = unit=='%'?item[field]*100:item[field];
                                    ylabels.push(item.groupName);
                                    xvalues.push(item[field]);
                                });
                            }

                            this.chartOption= {
                                title: {
                                    text: '能耗排名('+unit+')',
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'value',
                                },
                                yAxis: {
                                    type: 'category',
                                    data: ylabels
                                },
                                series: [
                                    {
                                        type: 'bar',
                                        data: xvalues
                                    },

                                ]
                            };
                        }
                    },
                    created:function(){

                        this.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);
                        this.endTime = this.beginTime;
                        this.energyType =HttpUtil.getQueryString('energyType');
                    },
                    mounted:function(){
                        this.tooltip =  true;
                    }
                });


            </script>
    </body>
</html>
